$(function () {
  // 定义状态变量
    let isUsernameReady = false,
        isPasswordReady = false,
        isMobileReady = false,
        isSmsCodeReady = false;

  let $img = $(".form-item .captcha-graph-img img");  //获取图像标签元素
  let sImageCodeId = ""; //uuid
  let $username = $("#user_name"); //获取用户对象标签元素
  let $passwordRepeat = $('input[name="password_repeat"]');//获取密码对象标签元素
  let $mobile = $('input[name="telephone"]');  // 获取手机号标签元素对象


  generateImageCode(); // 生成UUID验证码图片
  $img.click(generateImageCode);  // 图形验证码绑定点击刷新图片事件
  $username.blur(function () {  // 用户名对象绑定光标事件
    fn_check_username();  // 调用判断用户是否已经注册函数
  });
  $passwordRepeat.blur(function () { // 密码对象绑定光标事件
    fn_check_password(); //调用判断两次输入密码是否一致函数
  });
  $mobile.blur(function () {  // 手机号对象绑定光标事件
    fn_check_mobile();  // 调用手机号是否已经注册函数
  });

  // 1.1生成图片验证码UUID
  function generateUUID(){
    let d = new Date().getTime();
    if(window.performance && typeof window.performance.now === "function"){
      d += performance.now(); // use high-precision timer if available
    }
    let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      let r = (d + Math.random() * 16) % 16 | 0;
      d = Math.floor(d / 16);
      return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid
  }

  // 1.2生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
  function generateImageCode(){
    // 1.生成一个图片验证码随机编号
    sImageCodeId = generateUUID();
    // 2.拼接请求url image_code/<uuid:image_code_id>/
    let imageCodeUrl = "image_code/" + sImageCodeId + "/";
    // 3.修改验证码图片src地址
    $img.attr('src', imageCodeUrl);
  }

  // 2.判断用户是否已经注册函数
  function fn_check_username(){
    isUsernameReady = false;
    let sUsername = $username.val(); // 获取用户名字符串
    if (sUsername === ''){
      message.showError('用户名不能为空！');
      // alert('用户名不能为空！');
      return
    }
    if (!(/^\w{5,20}$/).test(sUsername)){
      message.showError('请输入5-20个字符的用户名');
      // alert('请输入5-20个字符的用户名');
      return
    }

    // 发送ajax请求，去后端查询用户名是否存在
    $.ajax({
      url:'username/'+ sUsername +'/',
      type:'GET',
      dataType: 'json',  // 指定前端传给后端的数据类型
      // contentType: 'json',  // 指定后端传给前端的数据类型
    })
      .done(function (res) {
      if (res.data.count !== 0){
        // alert(res.data.username + '已经注册了！');
        message.showError(res.data.username + '已经注册了！');
      }else{
        // alert(res.data.username + '能正常使用！');
        message.showInfo(res.data.username + '能正常使用！');
        isUsernameReady = true;
      }
    })
      .fail(function () {
        // alert("服务器超时，请重试！")
        message.showError("服务器超时，请重试！");
      })
  }

  // 3.验证密码是否一致
  function fn_check_password(){
    isPasswordReady = false;
    let password = $("input[name='password']").val();
    let passwordRepeat = $passwordRepeat.val();
    if(password === ''|| passwordRepeat===''){
      message.showError('密码不能为空');
      return
    }
    if(password !== passwordRepeat){
      message.showError('两次密码输入不一致');
      return
    }
    if(password === passwordRepeat){
      isPasswordReady=True;
    }
  }

  // 4.验证手机号是否注册
  function fn_check_mobile() {
    isMobileReady = false;
    let sMobile = $mobile.val();
    if(sMobile===""){
      message.showError("手机号码不能为空");
      return
    }
    if(!(/^1[3-9]\d{9}$/).test(sMobile)){
      message.showError('手机号码格式不正确');
      return
    }
    $.ajax({
      url:'/mobile/'+sMobile+'/',
      type:'GET',
      dataType: 'json',
      success:function (data) {
        if(data.data.count !==0){
          message.showError(data.data.mobile + "已经注册，请重新输入！")
        }else{
          message.showInfo(data.data.mobile + "可以正常使用！");
          isMobileReady=true
        }
      },
      error:function (xhr, msg) {
        message.showError('服务器超时，请重试！')
      },
    });
  }

  // 5.发送手机验证码
  let $smsButton = $('.sms-captcha');
  $smsButton.click(function () {

    // 判断手机号是否输入
      if(!isMobileReady){
          fn_check_mobile();
          return
      }

    // 判断用户是否输入图形验证码
      let sCaptcha = $('input[name="captcha_graph"]').val();
      if(sCaptcha === ''){
          message.showError('请输入验证码');
          return
      }

     // 判断是否生成UUID
      if(!sImageCodeId){
      message.showError('图片UUID空');
      return
    }


    // 向后端发送请求
      $.ajax({
          url: '/sms_code/',  // 请求地址
          type: 'POST', // 请求方式
          dataType: 'json', // 响应数据的格式（后端返回给前端的格式）
          data: {
            mobile: $mobile.val(), // 获取用户输入的手机号
            text: sCaptcha, // 获取用户输入的图片验证码文本
            image_code_id: sImageCodeId // 获取图片UUID
            },
          async:false,  // 关掉异步功能
          success: function (data) {
              if(data.errno !== '0'){
                  message.showError(data.errmsg)
              }else { // 倒计时60秒，60秒后允许用户再次点击发送短信验证码的按钮
                  message.showSuccess(data.errmsg);
                  var num = 60;
                  //设置计时器
                  let t = setInterval(function () {
                      if(num===1){
                        // 如果计时器到最后，清除计时器对象
                          clearInterval(t);
                          $smsButton.removeAttr('disable');
                          $smsButton.html("获取验证码");
                      }else{
                        num -= 1;
                        // 展示倒计时信息
                        $smsButton.attr('disable', true);
                        $smsButton.html(num + '秒');
                      }
                  }, 1000);
              }
          },
          error: function (xhr, msg) {
              message.showError('服务器超时，请重试！')
          }
      });
    });



});





